<template>
	<section class="sys-menu">
		<el-button type="primary" style="margin-bottom: 10px" @click="toWrite">
			写文章
		</el-button>
		<el-table :data="tableData" row-key="id" default-expand-all>
			<el-table-column prop="title" label="标题" />
			<el-table-column prop="author" label="作者" width="200px" />
			<el-table-column label="时间" width="240px">
				<template #default="scope">
					{{
						dayjs(scope.row.updated_at || scope.row.created_at).format(
							'YYYY-MM-DD HH:mm:ss',
						)
					}}
				</template>
			</el-table-column>
			<el-table-column label="类型" width="160px">
				<template #default="scope">
					{{ typeText[scope.row.type] }}
				</template>
			</el-table-column>
			<el-table-column label="操作" width="300">
				<template #default="scope">
					<el-popconfirm
						title="是否确定删除当前数据"
						width="200px"
						confirm-button-text="确定"
						cancel-button-text="取消"
						@confirm="deleteArticle(scope.row.id)"
					>
						<template #reference>
							<el-button text type="danger"> 删除 </el-button>
						</template>
					</el-popconfirm>
					<el-button text type="primary" @click="toDetail(scope.row.id)">
						编辑
					</el-button>
				</template>
			</el-table-column>
		</el-table>
		<el-pagination
			background
			style="margin-top: 10px"
			layout="prev, pager, next, total"
			:total="total"
			@current-change="changePage"
		/>
	</section>
</template>

<script setup>
import useTableData from '@/util/useTableData.js'
import { useRouter } from 'vue-router'
import dayjs from 'dayjs'
import { articleType } from '@/const/blog.js'

const typeText = {}

articleType.forEach((item) => {
	typeText[item.value] = item.label
})

const router = useRouter()
const toWrite = () => {
	router.push('/blog/write')
}

const toDetail = (id) => {
	router.push({
		path: '/blog/write',
		query: {
			id: id,
		},
	})
}

const { tableData, delRow, total, getTableData } = useTableData({
	getList: {
		url: '/blog/getArticleList',
		params: {
			page: 1,
			pageSize: 10,
		},
	},
})

const deleteArticle = (id) => {
	delRow('/blog/deleteArticle', { data: { id: id } }, 'delete')
}

const changePage = (val) => {
	getTableData({
		page: val,
	})
}
</script>

<style scoped>
.sys-menu {
	padding: 10px 20px;
}
:deep(.el-input-number .el-input__inner) {
	text-align: left;
}
:deep(.el-input-number) {
	width: 100%;
}
</style>
